import React from 'react'
import { Tabs } from 'react-vant';
import axios from 'axios';
import { QRCodeSVG } from 'qrcode.react';
import { Button, Form, Field } from 'react-vant';
import {useNavigate} from "react-router-dom"
type Props = {}

const Login = (props: Props) => {
  const [form] = Form.useForm();
  let tz = useNavigate()
  // 点击提交
  const onFinish = (values: any) => {
    axios.get("/login", { params: values }).then((res) => {//登录
      if (res.data.code === 200) {
        alert("登录成功")
        // @ts-ignore
        localStorage.setItem("token", true)
       
        tz(-1)
      } else {
        alert("登录失败")
      }
    })
  };

  return (
    <div><Tabs active={0}>

      <Tabs.TabPane key={0} title="登录">

        <Form
          form={form}
          showValidateMessage={false}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              {/* @ts-ignore */}
              <Button round nativeType="submit" type="primary" block>
                提交
              </Button>
            </div>
          }
        >
          <Form.Item
           
            intro="确保这是唯一的用户名"
            rules={[{ required: true, message: '请填写用户名' }]}
            name="name"
            label="用户名"
          >
            <Field placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item rules={[{ required: true, message: '请填写密码' }]} name="pswd" label="密码">
            <Field placeholder="请输入密码" />
          </Form.Item>
        </Form>


      </Tabs.TabPane>
      <Tabs.TabPane key={1} title="注册">
        注册
      </Tabs.TabPane>
      <Tabs.TabPane key={2} title="扫码">
        <QRCodeSVG value="https://reactjs.org/" />
      </Tabs.TabPane>

    </Tabs>
    </div>
  )
}

export default Login